<template>
  <div class="blog">
    <template v-for="item in list">
      <div class="blog-all" :key="item.id">
        <div class="blog-all-top">
          <div class="blog-all-title"> {{ item.title }} </div>
          <div class="blog-all-text">
            {{ item.content }}
          </div>
        </div>
        <div class="blog-all-ioc">
          <div class="ioc">
            <span>
              <i class="el-icon-notebook-2"></i>
              <span>{{ item.views }}阅读</span>
            </span>
            <span>
              <i class="el-icon-s-comment"></i>
              <span>{{ item.commentCount}}评论</span>
            </span>
            <span>
              <i class="el-icon-thumb"></i>
              <span>{{ item.likeCount }}点赞</span>
            </span>
            <span>
              {{ item.createTime || '2015-06-25' }}
            </span>
          </div>

          <div>
            <el-button size="mini" @click="deleteBlog(item.id)"> 删除 </el-button>
          </div>
        </div>
      </div>
    </template>
    

  <div class="page" v-if="list.length !== 0">
    <el-pagination
      layout="prev, pager, next"
      :total="list.length"
      size="10"
      >
      
    </el-pagination>
  </div>
    
  </div>
</template>

<script>

import { getmyblog, deleteblogAPI } from '@/api/blogone'

export default {
  data () {
    return {
      list: [],
      minsize: 0,
      maxsize: 9
    }
  },
  methods: {
    async getMsg(page = 0) {
      const res = await getmyblog({
        page,
        userId: JSON.parse(window.localStorage.getItem('user')).id,
        query: ''
      })
      this.list = res.data.data || []

      this.$store.commit('updareMyblogLength', this.list.length)

    },
    deleteBlog(id) {
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.deleteblogs(id)
        


        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 删除文章的接口
    deleteblogs(id) {
      deleteblogAPI({
        id
      }).then(res => {
        console.log(res);
        this.getMsg(1)
      })
    }
  },
  mounted() {
    this.getMsg(1)
  }
}
</script>

<style lang="scss" scoped>
span{
  font-size: 14px;
}
  .blog{
    .page{
      display: flex;
      justify-content: center;
    }
  }

  .blog-all{
    border-radius: 10px;
    height: 150px;
    background-color: white;
    margin-bottom: 20px;
    user-select: none;
    cursor: pointer;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .blog-all-top{
      .blog-all-title{
        font-weight: 550;
      }
      .blog-all-text{
        margin-top: 15px;
        height: 50px;
        color: #898989;
        line-height: 24px;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    .blog-all-ioc{
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .ioc{
        
        display: flex;
        gap: 30px;
        color: #898989;
      }
    }
  }
  .blog-all-title:hover{
    color: orange;
  }
</style>